<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="showDialog"
      >增加房间类型</el-button
    >

    <el-dialog
      :title="this.cform.id ? '修改房间类型' : '增加房间类型'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="cform">
        <el-form-item label="人数" :label-width="formLabelWidth">
          <el-input v-model="cform.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="cform.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="buttons">确 定</el-button>
      </div>
    </el-dialog>

    <el-table :data="Form" style="width: 100%; margin: 20px 0px" border>
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column prop="number" label="人数"> </el-table-column>
      <el-table-column prop="remark" label="名称"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="{ row, $index }">
          <el-button @click="update(row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" @click="deletea(row)" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "roomtype",
  data() {
    return {
      dialogFormVisible: false,
      Form: [],
      cform: {
        id: "",
        remark: "",
        number: "",
      },
      formLabelWidth: "180px",
    };
  },
  mounted() {
    this.findAllRoomType();
  },
  methods: {
    async deletea(row) {
      // console.log(row.id)
      let result = await this.$API.roomType.reqdeleteRoomTypeById(row);
      //  console.log(result)
      if (result.code == 20000) {
          this.$message({
          type: "success",
          message:"删除成功" ,
        });
        this.findAllRoomType();
      }
    },
    async update(row) {
      this.cform.id = row.id;
      this.cform.remark = row.remark;
      this.cform.number = row.number;
      this.dialogFormVisible = true;
      this.cform = { ...row };
      // let result = await thsi.$API.roomType.reqroomTypeUpdate(row);
    },
    async buttons() {
      let result = await this.$API.roomType.reqroomTypeaddRoomType(this.cform);
      console.log(result);
      if (result.code == 20000) {
        this.dialogFormVisible = false;
        this.$message({
          type: "success",
          message: this.cform.id ? "修改房间成功" : "添加房间成功",
        });
        this.findAllRoomType();
      }
    },
    showDialog() {
      this.cform = {};
      this.dialogFormVisible = true;
    },
    async findAllRoomType() {
      let result = await this.$API.roomType.reqfindRoomTypeAll();
      console.log(result);
      if (result.code == 20000) {
        this.Form = result.data;
      }
    },
  },
};
</script>